<template>
  <view class="myOrderBox">
    <view class="myOrderBoxHeader">
      <text @click="gotoFeedback">意见反馈</text>
    </view>
  	<view class="myOrderContent flex-column" v-show="feedbackShow == false" v-for="(item,index) in feedbackMessage" :key="index">
      <u-time-line style="margin: 1% 4%;">
        <u-time-line-item nodeTop="2">
          <!-- 此处自定义了左边内容，用一个图标替代 -->
          <template v-slot:node>
            <view class="u-node" style="background: #19be6b;">
              <!-- 此处为uView的icon组件 -->
              <u-icon name="pushpin-fill" color="#fff" :size="24"></u-icon>
            </view>
          </template>
          <template v-slot:content>
            <view>
              <view class="u-order-title">反馈类型: {{item.matterType}}</view>
            </view>
          </template>
        </u-time-line-item>
        <u-time-line-item>
          <!-- 此处没有自定义左边的内容，会默认显示一个点 -->
          <template v-slot:content>
            <view>
              <view class="u-order-desc">{{item.feedbackText}}</view>
              <view class="u-order-time">{{item.createTime}}</view>
            </view>
          </template>
        </u-time-line-item>
        <u-time-line-item nodeTop="2">
          <template v-slot:node>
            <view class="u-node" style="background: #819cff;">
              <u-icon name="checkbox-mark" color="#fff" :size="24"></u-icon>
            </view>
          </template>
          <template v-slot:content>
            <view>
              <view class="u-order-title">反馈回复: </view>
            </view>
          </template>
        </u-time-line-item>
        <u-time-line-item>
          <template v-slot:content>
            <view >
              <view class="u-order-desc" :style="item.reply == '' ? 'color: red':'color: green'">{{item.reply == '' ? '未处理' : item.reply }}</view>
              <view class="u-order-time">{{item.updateTime}}</view>
            </view>
          </template>
        </u-time-line-item>
      </u-time-line>
  	</view>
    <view v-show="feedbackShow" class="noGoodsBox flex-column">
    	<image src="../../static/no-order.png" class="noGoodsImg"></image>
    	<text>暂无反馈回复信息</text>
    	<text>请提交意见反馈信息或联系客服</text>
    </view>
  </view>
</template>

<script>
  import { getMyMessage } from "@/common/js/api/api.js";
	export default {
    onLoad() {
      uni.startPullDownRefresh();
    },
    onPullDownRefresh() {
      this.getMyMessage();
      setTimeout(() => {
        uni.stopPullDownRefresh();
      }, 500);
    },
		data() {
			return {
        feedbackShow: false,
        feedbackMessage: []
			}
		},
		methods: {
      getMyMessage() {
        getMyMessage({
          handled: null,
          sort: 'id,desc'
        }).then((res) => {
          this.feedbackMessage = res.data.content;
        }).catch((err) => {
        	console.log(err)
        });
      },
      gotoFeedback() {
        uni.navigateTo({
          url: '../feedBack/feedBack'
        })
      }
		}
	}
</script>